<template>
  <div class="programmer-day">
    <!-- 多层酷炫背景效果 - 延迟加载优化 -->
    <FluidBackground v-if="effectsLoaded.fluid" />
    <MatrixRain3D v-if="effectsLoaded.matrix" />
    <ParticleNebula v-if="effectsLoaded.nebula" />
    <EnergyPulse v-if="effectsLoaded.pulse" />
    <GlitchEffect v-if="effectsLoaded.glitch" />
    <MouseTrail v-if="effectsLoaded.trail" />
    
    <!-- 主内容区域 -->
    <div class="container">
      <!-- 主标题区域 - 全息投影风格 -->
      <div class="hero-section">
        <div class="date-badge holographic" @click="triggerCelebration">
          <span class="badge-number">10.24</span>
          <div class="badge-glow"></div>
          <div class="hologram-lines"></div>
        </div>
        
        <h1 class="main-title holographic-text">
          <span class="code-style">&lt;</span>
          <span class="title-text glitch-text" data-text="1024 程序员节">1024 程序员节</span>
          <span class="code-style">/&gt;</span>
        </h1>
        
        <p class="subtitle neon-glow">Happy Programmer's Day!</p>
      </div>

      <!-- 代码展示 - CRT显示器风格 -->
      <div class="code-section">
        <div class="code-window crt-effect">
          <div class="window-header">
            <span class="dot red"></span>
            <span class="dot yellow"></span>
            <span class="dot green"></span>
            <span class="file-name">celebrate_1024.js</span>
          </div>
          <pre class="code-content"><code><span class="keyword">function</span> <span class="function">celebrate1024</span>() {
  <span class="keyword">const</span> wishes = [
    <span class="string">'代码无Bug 💻'</span>,
    <span class="string">'需求不改变 📝'</span>,
    <span class="string">'服务器稳定 🚀'</span>,
    <span class="string">'薪资节节高 💰'</span>
  ];
  
  wishes.<span class="method">forEach</span>(wish => {
    console.<span class="method">log</span>(<span class="template">`祝所有程序员: ${wish}`</span>);
  });
  
  <span class="keyword">return</span> <span class="string">'Happy 1024! 🎉'</span>;
}</code></pre>
        </div>
      </div>

      <!-- 互动按钮 -->
      <div class="action-section">
        <button class="celebration-btn" @click="triggerCelebration" v-feedback>
          <span class="btn-glow"></span>
          <span class="btn-text">
            <span class="emoji">🎉</span>
            点击庆祝
          </span>
        </button>
        
        <button class="back-btn" @click="goBack" v-feedback>
          <span>← 返回</span>
        </button>
      </div>

      <!-- 祝福语 -->
      <div class="wishes-grid">
        <div class="wish-item" v-for="(wish, index) in wishes" :key="index" 
             :style="{ animationDelay: index * 0.1 + 's' }">
          <span class="wish-emoji">{{ wish.emoji }}</span>
          <span class="wish-text">{{ wish.text }}</span>
        </div>
      </div>
    </div>

    <!-- 烟花效果 -->
    <canvas ref="fireworksCanvas" class="fireworks-canvas"></canvas>

    <!-- 庆祝覆盖层 -->
    <transition name="celebrate-fade">
      <div v-if="celebrating" class="celebration-overlay">
        <div class="celebration-content">
          <div class="celebration-emoji">🎊</div>
          <div class="celebration-title">1024 节日快乐!</div>
          <div class="celebration-subtitle">Happy Programmer's Day</div>
          <div class="confetti-container">
            <div v-for="i in 50" :key="i" class="confetti" :style="getConfettiStyle(i)"></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import FluidBackground from '../components/FluidBackground.vue'
import MatrixRain3D from '../components/MatrixRain3D.vue'
import ParticleNebula from '../components/ParticleNebula.vue'
import EnergyPulse from '../components/EnergyPulse.vue'
import GlitchEffect from '../components/GlitchEffect.vue'
import MouseTrail from '../components/MouseTrail.vue'

const router = useRouter()
const celebrating = ref(false)
const fireworksCanvas = ref(null)
let animationId = null

// 延迟加载特效组件以避免阻塞
const effectsLoaded = ref({
  fluid: false,
  matrix: false,
  nebula: false,
  pulse: false,
  glitch: false,
  trail: false
})

// 检测设备性能
const isLowPerformance = () => {
  const isMobile = /mobile|android|iphone|ipad/i.test(navigator.userAgent)
  const cores = navigator.hardwareConcurrency || 2
  const memory = navigator.deviceMemory || 4
  return isMobile || cores < 4 || memory < 4
}

// 分步加载特效
const loadEffectsGradually = () => {
  const lowPerf = isLowPerformance()
  
  // 立即显示轻量级效果
  effectsLoaded.value.trail = true
  effectsLoaded.value.glitch = true
  
  // 延迟加载其他效果
  setTimeout(() => {
    effectsLoaded.value.matrix = true
    effectsLoaded.value.pulse = true
  }, 200)
  
  // 流体背景（中等性能消耗）
  if (!lowPerf) {
    setTimeout(() => {
      effectsLoaded.value.fluid = true
    }, 400)
  }
  
  // 粒子星云（高性能消耗）- 低配设备跳过
  if (!lowPerf) {
    setTimeout(() => {
      effectsLoaded.value.nebula = true
    }, 800)
  } else {
    console.log('低性能设备：已禁用部分高级特效')
  }
}

const wishes = [
  { emoji: '💻', text: '代码无Bug' },
  { emoji: '☕', text: '咖啡常满' },
  { emoji: '🚀', text: '项目顺利' },
  { emoji: '💰', text: '薪资翻倍' },
  { emoji: '🌟', text: '技术精进' },
  { emoji: '❤️', text: '生活美满' },
  { emoji: '🎯', text: '目标达成' },
  { emoji: '🔥', text: '热情不减' }
]

const getConfettiStyle = (index) => {
  const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981', '#3b82f6']
  return {
    left: Math.random() * 100 + '%',
    backgroundColor: colors[Math.floor(Math.random() * colors.length)],
    animationDelay: Math.random() * 0.5 + 's',
    animationDuration: (Math.random() * 2 + 2) + 's'
  }
}

// 升级版烟花 - 能量爆炸效果
const drawFireworks = () => {
  const canvas = fireworksCanvas.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  
  const particles = []
  
  class Particle {
    constructor(x, y, color) {
      this.x = x
      this.y = y
      this.color = color
      const angle = Math.random() * Math.PI * 2
      const speed = Math.random() * 10 + 5
      this.velocity = {
        x: Math.cos(angle) * speed,
        y: Math.sin(angle) * speed
      }
      this.alpha = 1
      this.decay = Math.random() * 0.02 + 0.01
      this.size = 2 + Math.random() * 3
      this.trail = []
    }
    
    draw() {
      ctx.save()
      
      // 绘制拖尾
      if (this.trail.length > 1) {
        ctx.strokeStyle = this.color
        ctx.lineWidth = 2
        ctx.globalAlpha = this.alpha * 0.3
        ctx.beginPath()
        ctx.moveTo(this.trail[0].x, this.trail[0].y)
        for (let i = 1; i < this.trail.length; i++) {
          ctx.lineTo(this.trail[i].x, this.trail[i].y)
        }
        ctx.stroke()
      }
      
      // 绘制粒子本体
      ctx.globalAlpha = this.alpha
      ctx.fillStyle = this.color
      ctx.shadowBlur = 15
      ctx.shadowColor = this.color
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
      ctx.fill()
      
      ctx.restore()
    }
    
    update() {
      this.trail.push({ x: this.x, y: this.y })
      if (this.trail.length > 10) {
        this.trail.shift()
      }
      
      this.velocity.y += 0.15
      this.velocity.x *= 0.98
      this.velocity.y *= 0.98
      this.x += this.velocity.x
      this.y += this.velocity.y
      this.alpha -= this.decay
      this.size *= 0.98
    }
  }
  
  // 创建能量爆炸（暴露给外部调用）
  window.createFirework = (x, y) => {
    const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981', '#00f3ff', '#ff006e']
    const color = colors[Math.floor(Math.random() * colors.length)]
    
    // 更多粒子，更震撼
    for (let i = 0; i < 100; i++) {
      particles.push(new Particle(x, y, color))
    }
    
    // 添加冲击波效果
    createShockwave(x, y, color)
  }
  
  // 冲击波效果
  const shockwaves = []
  const createShockwave = (x, y, color) => {
    shockwaves.push({ x, y, color, radius: 0, alpha: 1 })
  }
  
  const animate = () => {
    // 清除画布但保持透明
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    // 绘制冲击波
    for (let i = shockwaves.length - 1; i >= 0; i--) {
      const wave = shockwaves[i]
      wave.radius += 8
      wave.alpha -= 0.02
      
      if (wave.alpha <= 0) {
        shockwaves.splice(i, 1)
      } else {
        ctx.save()
        ctx.strokeStyle = wave.color
        ctx.lineWidth = 3
        ctx.globalAlpha = wave.alpha
        ctx.shadowBlur = 20
        ctx.shadowColor = wave.color
        ctx.beginPath()
        ctx.arc(wave.x, wave.y, wave.radius, 0, Math.PI * 2)
        ctx.stroke()
        ctx.restore()
      }
    }
    
    // 倒序遍历以安全删除
    for (let i = particles.length - 1; i >= 0; i--) {
      if (particles[i].alpha <= 0 || particles[i].size < 0.5) {
        particles.splice(i, 1)
      } else {
        particles[i].update()
        particles[i].draw()
      }
    }
    
    animationId = requestAnimationFrame(animate)
  }
  
  animate()
  
  return () => {
    if (animationId) {
      cancelAnimationFrame(animationId)
    }
    window.createFirework = null
  }
}

onMounted(() => {
  // 分步加载特效组件
  loadEffectsGradually()
  
  const cleanup = drawFireworks()
  
  onUnmounted(() => {
    if (cleanup) cleanup()
  })
})

const triggerCelebration = () => {
  celebrating.value = true
  
  // 创建多个烟花
  const canvas = fireworksCanvas.value
  if (canvas && window.createFirework) {
    for (let i = 0; i < 15; i++) {
      setTimeout(() => {
        const x = Math.random() * canvas.width
        const y = Math.random() * (canvas.height * 0.6) + 50
        window.createFirework(x, y)
      }, i * 200)
    }
  }
  
  setTimeout(() => {
    celebrating.value = false
  }, 4000)
}

const goBack = () => {
  router.push('/about')
}

// 路由路径：/1024
</script>

<style scoped>
.programmer-day {
  min-height: 100vh;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f35 100%);
  /* 全局辉光后期处理 */
  filter: contrast(1.1) brightness(1.05);
}

/* 烟花画布 */
.fireworks-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* 主标题区域 */
.hero-section {
  text-align: center;
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s ease;
}

.date-badge {
  position: relative;
  display: inline-block;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  padding: 1rem 3rem;
  border-radius: 50px;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 10px 40px rgba(99, 102, 241, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  animation: pulse-glow 2s ease-in-out infinite;
  overflow: hidden;
}

.date-badge.holographic {
  background: linear-gradient(
    135deg,
    #6366f1 0%,
    #8b5cf6 25%,
    #ec4899 50%,
    #8b5cf6 75%,
    #6366f1 100%
  );
  background-size: 200% 200%;
  animation: hologram-shift 3s ease infinite, pulse-glow 2s ease-in-out infinite;
}

.date-badge:hover {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 
    0 15px 50px rgba(99, 102, 241, 0.6),
    inset 0 0 30px rgba(255, 255, 255, 0.2);
}

/* 全息扫描线 */
.hologram-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.05) 0px,
    transparent 2px,
    transparent 4px,
    rgba(255, 255, 255, 0.05) 6px
  );
  animation: hologram-scan 2s linear infinite;
  pointer-events: none;
}

@keyframes hologram-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes hologram-scan {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.badge-number {
  position: relative;
  z-index: 2;
}

.badge-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.6), transparent);
  transform: translate(-50%, -50%);
  border-radius: 50px;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 10px 60px rgba(139, 92, 246, 0.6);
  }
}

@keyframes glow-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
}

.main-title {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.3;
  animation: title-shine 3s ease-in-out infinite;
}

/* 全息投影文字效果 */
.main-title.holographic-text {
  filter: 
    drop-shadow(0 0 10px rgba(99, 102, 241, 0.8))
    drop-shadow(0 0 20px rgba(139, 92, 246, 0.6))
    drop-shadow(0 0 30px rgba(236, 72, 153, 0.4));
}

/* 故障文字效果 */
.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}

.glitch-text:hover::before {
  animation: glitch-anim-1 0.3s infinite;
  opacity: 0.8;
  color: #00f3ff;
  z-index: -1;
}

.glitch-text:hover::after {
  animation: glitch-anim-2 0.3s infinite;
  opacity: 0.8;
  color: #ff006e;
  z-index: -2;
}

@keyframes glitch-anim-1 {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(-2px, -2px);
  }
  60% {
    transform: translate(2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
  }
}

@keyframes glitch-anim-2 {
  0%, 100% {
    transform: translate(0);
  }
  20% {
    transform: translate(2px, -2px);
  }
  40% {
    transform: translate(2px, 2px);
  }
  60% {
    transform: translate(-2px, -2px);
  }
  80% {
    transform: translate(-2px, 2px);
  }
}

.code-style {
  color: #6366f1;
  font-family: 'Courier New', monospace;
  font-size: 2.5rem;
}

.title-text {
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #6366f1);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

@keyframes title-shine {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.8));
  }
}

.subtitle {
  font-size: 1.5rem;
  color: #a0a9c9;
  margin-bottom: 2rem;
  animation: fadeIn 1s ease 0.3s backwards;
}

/* 霓虹发光效果 */
.subtitle.neon-glow {
  color: #00f3ff;
  text-shadow:
    0 0 5px #00f3ff,
    0 0 10px #00f3ff,
    0 0 20px #00f3ff,
    0 0 40px #0099ff;
  animation: neon-flicker 3s infinite alternate;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 5px #00f3ff,
      0 0 10px #00f3ff,
      0 0 20px #00f3ff,
      0 0 40px #0099ff;
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* 二进制数字雨已被MatrixRain3D组件替代 */

/* 代码窗口 */
.code-section {
  margin: 3rem 0;
  animation: fadeInUp 0.8s ease 0.2s backwards;
}

.code-window {
  background: #1e2139;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
}

/* CRT显示器效果 */
.code-window.crt-effect {
  position: relative;
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 50px rgba(0, 243, 255, 0.1),
    0 0 30px rgba(99, 102, 241, 0.5);
}

.code-window.crt-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 243, 255, 0.03) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0, 243, 255, 0.03) 3px
    );
  pointer-events: none;
  z-index: 10;
  border-radius: 15px;
  animation: crt-flicker 0.15s infinite;
}

.code-window.crt-effect::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.05) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 11;
  animation: crt-curve 8s ease-in-out infinite;
}

@keyframes crt-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.97;
  }
}

@keyframes crt-curve {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-2%, -2%) scale(1.02);
  }
}

.code-window:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 70px rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.4);
}

.code-window.crt-effect:hover {
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.7),
    inset 0 0 60px rgba(0, 243, 255, 0.2),
    0 0 40px rgba(99, 102, 241, 0.7);
}

.window-header {
  background: #2a2d47;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.dot.red {
  background: #ff5f56;
  box-shadow: 0 0 10px rgba(255, 95, 86, 0.5);
}

.dot.yellow {
  background: #ffbd2e;
  box-shadow: 0 0 10px rgba(255, 189, 46, 0.5);
}

.dot.green {
  background: #27c93f;
  box-shadow: 0 0 10px rgba(39, 201, 63, 0.5);
}

.code-window:hover .dot {
  animation: dot-blink 1s ease infinite;
}

@keyframes dot-blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.file-name {
  margin-left: auto;
  color: #8892b0;
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
}

.code-content {
  padding: 2rem;
  overflow-x: auto;
  background: #1a1d2e;
}

.code-content code {
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 1rem;
  line-height: 1.8;
  color: #e6e6e6;
}

.keyword {
  color: #ff79c6;
  font-weight: 600;
}

.function {
  color: #50fa7b;
}

.string {
  color: #f1fa8c;
}

.template {
  color: #f1fa8c;
}

.method {
  color: #50fa7b;
}

/* 互动按钮区域 */
.action-section {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem 0;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease 0.4s backwards;
}

.celebration-btn {
  position: relative;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  padding: 1.2rem 3rem;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 
    0 10px 40px rgba(99, 102, 241, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.6));
}

.celebration-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 15px 50px rgba(99, 102, 241, 0.6),
    inset 0 0 30px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(99, 102, 241, 0.8);
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.8));
}

.btn-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
  transform: translate(-50%, -50%);
  animation: btn-glow-pulse 2s ease infinite;
}

@keyframes btn-glow-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
}

.btn-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.emoji {
  font-size: 1.5rem;
  animation: emoji-spin 3s ease infinite;
}

@keyframes emoji-spin {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-15deg) scale(1.1);
  }
  75% {
    transform: rotate(15deg) scale(1.1);
  }
}

.back-btn {
  background: rgba(99, 102, 241, 0.1);
  border: 2px solid rgba(99, 102, 241, 0.3);
  color: #fff;
  padding: 1.2rem 2rem;
  border-radius: 50px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(99, 102, 241, 0.3);
}

/* 祝福语网格 */
.wishes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
  animation: fadeInUp 0.8s ease 0.6s backwards;
}

.wish-item {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  animation: wish-float 0.6s ease backwards;
  position: relative;
  overflow: hidden;
}

.wish-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wish-item:hover::before {
  opacity: 1;
}

.wish-item:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 
    0 10px 30px rgba(99, 102, 241, 0.4),
    0 0 20px rgba(99, 102, 241, 0.3),
    inset 0 0 20px rgba(99, 102, 241, 0.1);
  filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.5));
}

@keyframes wish-float {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wish-emoji {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  animation: emoji-bounce 2s ease-in-out infinite;
}

@keyframes emoji-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.wish-text {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
}

/* 庆祝覆盖层 */
.celebration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: overlay-fade-in 0.5s ease;
}

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.celebration-content {
  text-align: center;
  animation: celebration-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes celebration-pop {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.celebration-emoji {
  font-size: 8rem;
  margin-bottom: 1rem;
  animation: celebration-spin 2s ease infinite;
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
}

@keyframes celebration-spin {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
}

.celebration-title {
  font-size: 4rem;
  font-weight: 700;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f59e0b, #10b981);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 2s ease infinite;
  margin-bottom: 1rem;
  text-shadow: 0 0 50px rgba(99, 102, 241, 0.5);
}

.celebration-subtitle {
  font-size: 1.5rem;
  color: #a0a9c9;
  margin-top: 0.5rem;
}

/* 彩纸效果 */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -10px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  to {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* 过渡动画 */
.celebrate-fade-enter-active,
.celebrate-fade-leave-active {
  transition: all 0.5s ease;
}

.celebrate-fade-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.celebrate-fade-leave-to {
  opacity: 0;
  transform: scale(1.1);
}

/* 基础动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .programmer-day {
    padding: 40px 0;
  }
  
  .main-title {
    font-size: 2rem;
  }
  
  .code-style {
    font-size: 1.5rem;
  }
  
  .date-badge {
    font-size: 1.5rem;
    padding: 0.8rem 2rem;
  }
  
  .celebration-title {
    font-size: 2.5rem;
  }
  
  .celebration-emoji {
    font-size: 5rem;
  }
  
  .wishes-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  .action-section {
    flex-direction: column;
  }
  
  .celebration-btn,
  .back-btn {
    width: 100%;
  }
  
  /* 移动端性能优化 - 减少特效强度 */
  .code-window.crt-effect::before,
  .code-window.crt-effect::after {
    display: none;
  }
  
  .wish-item::before {
    display: none;
  }
  
  /* 减少阴影和模糊以提升性能 */
  .celebration-btn {
    filter: none;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
  }
  
  .wish-item:hover {
    filter: none;
  }
}

/* 性能优化：为硬件加速优化的元素 */
.date-badge,
.celebration-btn,
.wish-item,
.code-window {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  /* 移除悬停动画 */
  .glitch-text:hover::before,
  .glitch-text:hover::after {
    animation: none;
    opacity: 0;
  }
  
  .subtitle.neon-glow {
    animation: none;
    text-shadow:
      0 0 5px #00f3ff,
      0 0 10px #00f3ff,
      0 0 20px #00f3ff;
  }
  
  /* 简化点击反馈 */
  .date-badge:active {
    transform: scale(0.95);
  }
  
  .celebration-btn:active {
    transform: scale(0.95);
  }
}
</style>
